<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>标题</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<link type='text/css' rel='stylesheet' href='css/fyz.in.style-1.0.0.css'></link>		
<script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
<style type='text/css'>
*{margin:0px; padding:0px; font-size:50px; font-family:'微软雅黑'; color:#fff;}
dl.box{width:800px;  margin:0px auto; background:cyan; margin:100px auto;}
dl.box dt.box{width:100%; height:300px; text-align:center; background:orange; margin:30px auto;}
dl.box dt.box p{
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
}
dl.box dt.box p.one{opacity:0;}
dl.box dt.box p.two{opacity:0;}
dl.box dt.box p.thr{opacity:0;}
dl.box dd.box{margin:0px auto; text-align:center; line-height:35px;  color:#fff;  cursor:pointer;}
dl.box dd.box span{margin-right:10px; background:orange; display:inline-block; font-size:20px; width:100px; height:30px;}
.tanslate{transform:translateY(-5px);}
</style>
</head>
<body>
<dl class='box box1'>
	<dt class='box'>
		<p class='one'>第一个文字</p>
		<p class='two'>第二个文字</p>
		<p class='thr'>第三个文字</p>
	</dt>
	<dd class='box'><span class='add'>ADD</span><span class='move'>MOVE</span></dd>
</dl>
<script type='text/javascript'>
$('dl.box').find('dd.box').find('span.add').click(function(){
	$('dl.box').find('p.one').animate({'opacity':'1'},500,function(){
		$(this).addClass('tanslate');
		$('dl.box').find('p.two').animate({'opacity':'1'},500,function(){
			$(this).addClass('tanslate');
			$('dl.box').find('p.thr').animate({'opacity':'1'},500,function(){
				$(this).addClass('tanslate');
			});
		});
	});
	//$('dl.box').delay(5000).find('p.two').css('opacity','1');
	/*$('dl.box').find('p.one').css({
		'opacity':'1',
		'transform':'translateY(-5px)',
		'-webkit-transform':'translateY(-5px)'
	});*/
});
</script>
<!-- <script type='text/javascript'>
$('dl.box').find('dd.box').click(function(){
	$('dl.box').find('p.one').animate({'opacity':'1'},800,function(){
		$('dl.box').find('p.two').animate({'opacity':'1'},1000,function(){
			$('dl.box').find('p.thr').animate({'opacity':'1'},1000);
		});
	});
});
</script> -->
</body>
<!--
opacity: 1; transform: translate(0px, 0px);
-->
<!-- <script type='text/javascript'>
$('dd.box>span.add').click(function(){
	$('dt.box>span.One').animate({'opacity':'0.5'},100,function(){
		$(this).addClass('animated flipInX');
		$('dt.box>span.Two').animate({'opacity':'0.5'},100,function(){
			$(this).addClass('animated fadeInUp');
		});
	});
});
</script> -->
</html>
